Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / network-visualiser / internal / NetworkVisualiserToolbar.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute top-2 left-2 right-2 sm:top-4 sm:left-4 sm:right-4 z-10 flex flex-col sm:flex-row gap-2 pointer-events-noneTa5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffpointer-events-auto border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl overflow-hidden w-full sm:min-w-[280px] sm:w-auto transition-all duration-300Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center px-4 sm:px-5 py-3 sm:py-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-zinc-800/50 transition-colorsTa5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:isShowingControlsTa5d6ff'Ta5d6ff, !isShowingControls)Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 flex flex-col min-w-0 mr-2Ta5d6ff"Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fffont-bold text-gray-900 dark:text-zinc-100 tracking-tight truncateTa5d6ff"Tff7b72>{{

Te6edf3$t("visualiser.reticulum_mesh")

}}Tff7b72</span>

Tff7b72<span

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] uppercase font-bold text-gray-500 dark:text-zinc-500 tracking-widest truncateTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.network_visualizer") }}Tff7b72</span

>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-2Ta5d6ff"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffinline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white transition-all active:scale-95Ta5d6ff"

Te6edf3:disabled=Ta5d6ff"Ta5d6ffisUpdating || isLoadingTa5d6ff"

@click.Te6edf3stop=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffmanual-updateTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<svg

Te6edf3v-if=Ta5d6ff"Ta5d6ff!isUpdating && !isLoadingTa5d6ff"

Te6edf3xmlns=Ta5d6ff"Ta5d6ffhttp://www.w3.org/2000/svgTa5d6ff"

Te6edf3fill=Ta5d6ff"Ta5d6ffnoneTa5d6ff"

Te6edf3viewBox=Ta5d6ff"Ta5d6ff0 0 24 24Ta5d6ff"

Te6edf3stroke-width=Ta5d6ff"Ta5d6ff2Ta5d6ff"

Te6edf3stroke=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4 sm:w-5 sm:h-5Ta5d6ff"

Tff7b72>

Tff7b72<path

Te6edf3stroke-linecap=Ta5d6ff"Ta5d6ffroundTa5d6ff"

Te6edf3stroke-linejoin=Ta5d6ff"Ta5d6ffroundTa5d6ff"

Te6edf3d=Ta5d6ff"Ta5d6ffM16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99Ta5d6ff"

Tff7b72/>

Tff7b72</svg>

Tff7b72<svg

v-else

Te6edf3class=Ta5d6ff"Ta5d6ffanimate-spin h-4 w-4 sm:w-5 sm:h-5Ta5d6ff"

Te6edf3xmlns=Ta5d6ff"Ta5d6ffhttp://www.w3.org/2000/svgTa5d6ff"

Te6edf3fill=Ta5d6ff"Ta5d6ffnoneTa5d6ff"

Te6edf3viewBox=Ta5d6ff"Ta5d6ff0 0 24 24Ta5d6ff"

Tff7b72>

Tff7b72<circle

Te6edf3class=Ta5d6ff"Ta5d6ffopacity-25Ta5d6ff"

Te6edf3cx=Ta5d6ff"Ta5d6ff12Ta5d6ff"

Te6edf3cy=Ta5d6ff"Ta5d6ff12Ta5d6ff"

Te6edf3r=Ta5d6ff"Ta5d6ff10Ta5d6ff"

Te6edf3stroke=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff"

Te6edf3stroke-width=Ta5d6ff"Ta5d6ff4Ta5d6ff"

Tff7b72>Tff7b72</circle>

Tff7b72<path

Te6edf3class=Ta5d6ff"Ta5d6ffopacity-75Ta5d6ff"

Te6edf3fill=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff"

Te6edf3d=Ta5d6ff"Ta5d6ffM4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zTa5d6ff"

Tff7b72>Tff7b72</path>

Tff7b72</svg>

Tff7b72</button>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-5 sm:w-6 flex justify-centerTa5d6ff"Tff7b72>

Tff7b72<svg

Te6edf3xmlns=Ta5d6ff"Ta5d6ffhttp://www.w3.org/2000/svgTa5d6ff"

Te6edf3viewBox=Ta5d6ff"Ta5d6ff0 0 20 20Ta5d6ff"

Te6edf3fill=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4 sm:w-5 sm:h-5 text-gray-400 transition-transform duration-300Ta5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffrotate-180Ta5d6ff'Ta5d6ff: isShowingControls }Ta5d6ff"

Tff7b72>

Tff7b72<path

Te6edf3fill-rule=Ta5d6ff"Ta5d6ffevenoddTa5d6ff"

Te6edf3d=Ta5d6ff"Ta5d6ffM5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06ZTa5d6ff"

Te6edf3clip-rule=Ta5d6ff"Ta5d6ffevenoddTa5d6ff"

Tff7b72/>

Tff7b72</svg>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3v-show=Ta5d6ff"Ta5d6ffisShowingControlsTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffpx-5 pb-5 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffh-px bg-linear-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparentTa5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffauto-reloadTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>Auto UpdateTff7b72</label

>

Tff7b72<Toggle

Te6edf3id=Ta5d6ff"Ta5d6ffauto-reloadTa5d6ff"

Te6edf3:model-value=Ta5d6ff"Ta5d6ffautoReloadTa5d6ff"

@Te6edf3update:model-value=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:autoReloadTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffenable-physicsTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>Live LayoutTff7b72</label

>

Tff7b72<Toggle

Te6edf3id=Ta5d6ff"Ta5d6ffenable-physicsTa5d6ff"

Te6edf3:model-value=Ta5d6ff"Ta5d6ffenablePhysicsTa5d6ff"

@Te6edf3update:model-value=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:enablePhysicsTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-between gap-2Ta5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffhop-filter-sliderTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.max_hops_filter") }}Tff7b72</label

>

Tff7b72<input

Te6edf3id=Ta5d6ff"Ta5d6ffhop-max-hops-inputTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"

Te6edf3inputmode=Ta5d6ff"Ta5d6ffnumericTa5d6ff"

Te6edf3autocomplete=Ta5d6ff"Ta5d6ffoffTa5d6ff"

Te6edf3maxlength=Ta5d6ff"Ta5d6ff4Ta5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.max_hops_filterTa5d6ff'Ta5d6ff)Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-13 shrink-0 rounded-lg border border-gray-200 bg-white px-1.5 py-1 text-center text-xs font-bold text-blue-600 tabular-nums shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500/40 dark:border-zinc-600 dark:bg-zinc-800 dark:text-blue-400 dark:focus:border-blue-500Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffhopMaxInputShownTa5d6ff"

Te6edf3:placeholder=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.allTa5d6ff'Ta5d6ff)Ta5d6ff"

@Te6edf3focus=Ta5d6ff"Ta5d6ffonHopMaxInputFocusTa5d6ff"

@Te6edf3input=Ta5d6ff"Ta5d6ffonHopMaxInputInputTa5d6ff"

@Te6edf3blur=Ta5d6ff"Ta5d6ffonHopMaxInputBlurTa5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<input

Te6edf3id=Ta5d6ff"Ta5d6ffhop-filter-sliderTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffrangeTa5d6ff"

Te6edf3min=Ta5d6ff"Ta5d6ff0Ta5d6ff"

Te6edf3:max=Ta5d6ff"Ta5d6ffhopSliderPosAllTa5d6ff"

Te6edf3step=Ta5d6ff"Ta5d6ff1Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffhopSliderUiPosTa5d6ff"

Te6edf3:aria-valuetext=Ta5d6ff"Ta5d6ffhopSliderAriaTextTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 dark:bg-zinc-700 accent-blue-600 dark:accent-blue-500Ta5d6ff"

@Te6edf3input=Ta5d6ff"Ta5d6ffonHopSliderInputTa5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-2 gap-3 pt-2Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1Ta5d6ff"

Tff7b72>

Nodes

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-lg font-bold text-blue-600 dark:text-blue-400Ta5d6ff"Tff7b72>{{ nodeCount }}Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1Ta5d6ff"

Tff7b72>

Links

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-lg font-bold text-emerald-600 dark:text-emerald-400Ta5d6ff"Tff7b72>{{ edgeCount }}Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-zinc-950/5 dark:bg-white/5 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-2Ta5d6ff"Tff7b72>

Interfaces

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-4Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1.5Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-2 h-2 rounded-full bg-emerald-500Ta5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-700 dark:text-zinc-300Ta5d6ff"

Tff7b72>{{ onlineInterfaceCount }} OnlineTff7b72</span

>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1.5Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-2 h-2 rounded-full bg-red-500Ta5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-700 dark:text-zinc-300Ta5d6ff"

Tff7b72>{{ offlineInterfaceCount }} OfflineTff7b72</span

>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffsm:ml-auto w-full sm:w-auto pointer-events-autoTa5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelative groupTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colorsTa5d6ff"

Tff7b72>

Tff7b72<svg Te6edf3xmlns=Ta5d6ff"Ta5d6ffhttp://www.w3.org/2000/svgTa5d6ff" Te6edf3viewBox=Ta5d6ff"Ta5d6ff0 0 20 20Ta5d6ff" Te6edf3fill=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4Ta5d6ff"Tff7b72>

Tff7b72<path

Te6edf3fill-rule=Ta5d6ff"Ta5d6ffevenoddTa5d6ff"

Te6edf3d=Ta5d6ff"Ta5d6ffM9 3.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM2.25 10a7.75 7.75 0 1 1 14.03 4.5l3.47 3.47a.75.75 0 0 1-1.06 1.06l-3.47-3.47A7.75 7.75 0 0 1 2.25 10ZTa5d6ff"

Te6edf3clip-rule=Ta5d6ff"Ta5d6ffevenoddTa5d6ff"

Tff7b72/>

Tff7b72</svg>

Tff7b72</div>

Tff7b72<input

Te6edf3:value=Ta5d6ff"Ta5d6ffsearchQueryTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"

Te6edf3:placeholder=Ta5d6ff"Ta5d6ff`Search nodes (Tff7b72${Te6edf3nodeCountTff7b72}Ta5d6ff)...`Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full sm:w-64 pl-9 pr-10 py-2.5 sm:py-3 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-gray-200/50 dark:border-zinc-800/50 rounded-2xl text-xs font-semibold focus:outline-hidden focus:ring-2 focus:ring-blue-500/50 sm:focus:w-80 md:max-lg:focus:w-72 lg:focus:w-80 transition-all dark:text-zinc-100 shadow-xsTa5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:searchQueryTa5d6ff'Ta5d6ff, Te6edf3$event.target.valueTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"Ta5d6ffsearchQueryTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-zinc-200 transition-colorsTa5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:searchQueryTa5d6ff'Ta5d6ff, Ta5d6ff'Ta5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<svg Te6edf3xmlns=Ta5d6ff"Ta5d6ffhttp://www.w3.org/2000/svgTa5d6ff" Te6edf3viewBox=Ta5d6ff"Ta5d6ff0 0 20 20Ta5d6ff" Te6edf3fill=Ta5d6ff"Ta5d6ffcurrentColorTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4Ta5d6ff"Tff7b72>

Tff7b72<path

Te6edf3d=Ta5d6ff"Ta5d6ffM6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22ZTa5d6ff"

Tff7b72/>

Tff7b72</svg>

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import Toggle from "../../forms/Toggle.vue";

import { HOP_SLIDER_POS_ALL, hopSliderPosToMaxHops, hopMaxHopsToSliderPos } from "./hopMaxFilterSliderMap.js";

export default {

name: "NetworkVisualiserToolbar",

components: { Toggle },

props: {

isShowingControls: { type: Boolean, default: true },

isUpdating: { type: Boolean, default: false },

isLoading: { type: Boolean, default: false },

autoReload: { type: Boolean, default: false },

enablePhysics: { type: Boolean, default: true },

hopMaxFilter: {

default: 4,

validator(v) {

return v === null || (typeof v === "number" && Number.isFinite(v) && v >= 0 && v <= 128);

},

},

nodeCount: { type: Number, default: 0 },

edgeCount: { type: Number, default: 0 },

onlineInterfaceCount: { type: Number, default: 0 },

offlineInterfaceCount: { type: Number, default: 0 },

searchQuery: { type: String, default: "" },

},

emits: [

"update:isShowingControls",

"update:autoReload",

"update:enablePhysics",

"update:hopMaxFilter",

"update:searchQuery",

"manual-update",

],

data() {

return {

hopMaxInputDraft: null,

};

},

computed: {

hopSliderPosAll() {

return HOP_SLIDER_POS_ALL;

},

hopSliderUiPos() {

return hopMaxHopsToSliderPos(this.hopMaxFilter);

},

hopMaxInputShown() {

if (this.hopMaxInputDraft !== null) return this.hopMaxInputDraft;

if (this.hopMaxFilter === null) return "";

return String(this.hopMaxFilter);

},

hopSliderAriaText() {

if (this.hopMaxFilter === null) return this.$t("visualiser.all");

return String(this.hopMaxFilter);

},

},

methods: {

onHopSliderInput(e) {

const v = hopSliderPosToMaxHops(Number(e.target.value));

this.$emit("update:hopMaxFilter", v);

},

onHopMaxInputFocus() {

this.hopMaxInputDraft = this.hopMaxFilter === null ? "" : String(this.hopMaxFilter);

},

onHopMaxInputInput(e) {

const raw = e.target.value.replace(/\D/g, "");

this.hopMaxInputDraft = raw;

if (raw === "") return;

const n = parseInt(raw, 10);

if (!Number.isFinite(n)) return;

const clamped = Math.max(0, Math.min(128, Math.round(n)));

this.$emit("update:hopMaxFilter", clamped);

this.hopMaxInputDraft = String(clamped);

},

onHopMaxInputBlur() {

const d = this.hopMaxInputDraft;

this.hopMaxInputDraft = null;

if (d === null) return;

const trimmed = (d || "").trim();

if (trimmed === "") {

this.$emit("update:hopMaxFilter", null);

return;

}

const n = parseInt(trimmed, 10);

if (!Number.isFinite(n)) return;

this.$emit("update:hopMaxFilter", Math.max(0, Math.min(128, Math.round(n))));

},

},

};

Tff7b72</script>